<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>干货详情 - 人才职业生涯规划平台</title>
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <link rel="stylesheet" href="../css/article-details.css">
</head>
<body>
    <div class="app-container">
        <!-- 进度条 -->
        <div class="progress-bar"></div>
        
        <!-- 返回顶部按钮 -->
        <div class="float-action" id="backToTop">
            <i class="bi bi-arrow-up"></i>
        </div>

        <!-- 头部导航 -->
        <header class="header">
            <a href="javascript:history.back()" class="back-btn"><i class="bi bi-arrow-left"></i></a>
            <h1 class="page-title" id="article-title">干货详情</h1>
            <div class="share-btn">
                <i class="bi bi-share"></i>
            </div>
        </header>

        <!-- 主内容区 -->
        <main class="main-content">
            <article class="article-content">
                <!-- 文章标题 -->
                <div class="article-header">
                    <h1 id="content-title" class="main-title">如何在简历中突出项目经历</h1>
                    <div class="article-meta">
                        <div class="author-info">
                            <img src="https://images.pexels.com/photos/819530/pexels-photo-819530.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="作者头像" class="author-avatar" id="author-avatar">
                            <div class="author-details">
                                <div class="author-name" id="author-name">简历优化师Tom</div>
                                <div class="publish-time">2023-09-15 · 阅读 1.2万</div>
                            </div>
                        </div>
                        <button class="follow-btn">关注</button>
                    </div>
                    <div class="article-category" id="article-category">简历优化</div>
                </div>

                <!-- 文章内容 -->
                <div class="article-body" id="article-body">
                    <img src="https://images.pexels.com/photos/4342496/pexels-photo-4342496.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="文章配图" class="cover-image" id="cover-image">
                    
                    <h2>为什么项目经历在简历中如此重要？</h2>
                    <p>在简历筛选过程中，HR和面试官通常会花费大量时间关注应聘者的项目经历部分。这是因为项目经历能够直观展示你的实际工作能力、解决问题的方法和团队协作能力。一个详实而有亮点的项目经历描述，往往是你获得面试机会的关键因素。</p>
                    
                    <h2>项目经历描述的STAR法则</h2>
                    <p>在描述项目经历时，我推荐使用STAR法则，这是一种结构化的方法来呈现你的经历：</p>
                    <ul>
                        <li><strong>Situation（情境）</strong>：简要描述项目背景和你所在的环境</li>
                        <li><strong>Task（任务）</strong>：明确指出你在项目中的具体职责和需要完成的任务</li>
                        <li><strong>Action（行动）</strong>：详细说明你采取了哪些具体行动来完成任务</li>
                        <li><strong>Result（结果）</strong>：强调你的行动带来的具体成果和影响</li>
                    </ul>
                    
                    <h2>项目经历描述中的常见错误</h2>
                    <p>在我多年的HR和简历顾问经验中，发现求职者在写项目经历时常犯以下错误：</p>
                    <ol>
                        <li>只描述项目是什么，而不说明自己做了什么</li>
                        <li>使用过多专业术语而缺乏可量化的成果</li>
                        <li>项目描述过于冗长，没有突出重点</li>
                        <li>缺乏个人贡献的体现，让人无法评估你的实际能力</li>
                    </ol>
                    
                    <h2>如何用数据量化项目成果</h2>
                    <p>在描述项目成果时，尽可能使用具体的数据来量化你的贡献。例如：</p>
                    <ul>
                        <li>"优化了网站性能" → "将网站加载时间减少了40%，从3.5秒降至2.1秒"</li>
                        <li>"提高了用户转化率" → "通过重新设计注册流程，将转化率提升了25%"</li>
                        <li>"减少了系统故障" → "将系统故障率从每月5次降低到每季度1次以下"</li>
                    </ul>
                    
                    <h2>不同行业项目经历的差异化突出方向</h2>
                    <p>根据不同的行业和职位，你应该突出不同的项目经历特点：</p>
                    <div class="highlight-box">
                        <h3>技术岗位</h3>
                        <p>突出技术难点的解决方案、性能优化、技术选型决策等</p>
                        
                        <h3>产品岗位</h3>
                        <p>强调用户需求分析、产品设计思路、数据指标改善等</p>
                        
                        <h3>营销岗位</h3>
                        <p>重点展示市场策略、活动效果、ROI提升等</p>
                    </div>
                    
                    <h2>项目经历模板示例</h2>
                    <div class="example-box">
                        <p><strong>电商平台搜索优化项目</strong> (2022.03 - 2022.08)</p>
                        <p><strong>背景</strong>：公司电商平台搜索功能用户满意度低，仅为65%，影响转化率。</p>
                        <p><strong>职责</strong>：作为项目负责人，带领3人团队重构搜索算法，并优化搜索结果展示界面。</p>
                        <p><strong>行动</strong>：</p>
                        <ul>
                            <li>分析用户搜索日志，识别搜索体验痛点</li>
                            <li>重构搜索排序算法，增加用户行为权重</li>
                            <li>设计A/B测试实验，验证算法有效性</li>
                            <li>优化搜索结果页面，提升关键信息可见度</li>
                        </ul>
                        <p><strong>结果</strong>：搜索准确率提升30%，用户满意度上升至88%，产品转化率提高15%，为公司增加季度收入约200万元。</p>
                    </div>
                    
                    <h2>写在最后</h2>
                    <p>项目经历是展示你实际能力的窗口，用心打磨这一部分将大大提高你的简历通过率。记住，HR更看重的是你在项目中的具体贡献和解决问题的能力，而不仅仅是你参与过什么项目。</p>
                </div>

                <!-- 文章底部 -->
                <div class="article-footer">
                    <div class="action-bar">
                        <div class="action-btn like-btn">
                            <i class="bi bi-heart"></i>
                            <span>328</span>
                        </div>
                        <div class="action-btn comment-btn">
                            <i class="bi bi-chat"></i>
                            <span>42</span>
                        </div>
                        <div class="action-btn collect-btn">
                            <i class="bi bi-bookmark"></i>
                            <span>收藏</span>
                        </div>
                        <div class="action-btn share-btn">
                            <i class="bi bi-share"></i>
                            <span>分享</span>
                        </div>
                    </div>
                </div>
            </article>

            <!-- 相关推荐 -->
            <section class="related-section">
                <h2 class="section-title">相关推荐</h2>
                <div class="related-list">
                    <div class="related-item" onclick="window.location.href='tips-details.html?id=5'">
                        <div class="related-item-img">
                            <img src="https://images.pexels.com/photos/7256694/pexels-photo-7256694.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="应届生简历写作攻略">
                        </div>
                        <div class="related-item-info">
                            <h3>应届生简历写作攻略</h3>
                            <p class="related-item-meta">
                                <span class="author">校招负责人张洁</span>
                                <span class="views"><i class="bi bi-eye"></i> 1.5万</span>
                            </p>
                        </div>
                    </div>
                    <div class="related-item" onclick="window.location.href='tips-details.html?id=2'">
                        <div class="related-item-img">
                            <img src="https://images.pexels.com/photos/5668858/pexels-photo-5668858.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="大厂面试常见问题及应对策略">
                        </div>
                        <div class="related-item-info">
                            <h3>大厂面试常见问题及应对策略</h3>
                            <p class="related-item-meta">
                                <span class="author">资深面试官李明</span>
                                <span class="views"><i class="bi bi-eye"></i> 2.3万</span>
                            </p>
                        </div>
                    </div>
                </div>
            </section>

            <!-- 评论区 -->
            <section class="comment-section">
                <h2 class="section-title">评论 <span class="comment-count">(42)</span></h2>
                <div class="comment-list">
                    <div class="comment-item">
                        <div class="comment-user">
                            <img src="https://images.pexels.com/photos/1043474/pexels-photo-1043474.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="用户头像" class="comment-avatar">
                            <div class="comment-user-info">
                                <div class="comment-username">职场新人小王</div>
                                <div class="comment-time">2023-09-17</div>
                            </div>
                        </div>
                        <div class="comment-content">
                            <p>文章写得很详细，我按照STAR法则修改了简历中的项目经历部分，效果非常好，已经收到了两个面试邀请！特别是关于量化成果的部分很有帮助。</p>
                        </div>
                        <div class="comment-actions">
                            <div class="comment-like"><i class="bi bi-heart"></i> 15</div>
                            <div class="comment-reply">回复</div>
                        </div>
                    </div>
                    <div class="comment-item">
                        <div class="comment-user">
                            <img src="https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="用户头像" class="comment-avatar">
                            <div class="comment-user-info">
                                <div class="comment-username">HR老张</div>
                                <div class="comment-time">2023-09-16</div>
                            </div>
                        </div>
                        <div class="comment-content">
                            <p>作为一名HR，我完全赞同这篇文章的观点。项目经历确实是我们筛选简历时最关注的部分之一。尤其是那些能够清晰表达自己贡献并用数据支持的候选人，往往会给我们留下深刻印象。</p>
                        </div>
                        <div class="comment-actions">
                            <div class="comment-like"><i class="bi bi-heart"></i> 28</div>
                            <div class="comment-reply">回复</div>
                        </div>
                    </div>
                </div>
                <div class="comment-form">
                    <textarea placeholder="写下你的评论..." class="comment-input"></textarea>
                    <button class="comment-submit">发布</button>
                </div>
            </section>
        </main>

        <!-- 底部导航栏 -->
        <footer class="tab-bar">
            <a href="../index.html" class="tab-item">
                <i class="bi bi-house-door"></i>
                <span>首页</span>
            </a>
            <a href="discover.html" class="tab-item active">
                <i class="bi bi-compass-fill"></i>
                <span>发现</span>
            </a>
            <a href="agents.html" class="tab-item">
                <i class="bi bi-person-badge"></i>
                <span>经纪人</span>
            </a>
            <a href="profile.html" class="tab-item">
                <i class="bi bi-person"></i>
                <span>我的</span>
            </a>
        </footer>
    </div>

    <script src="../js/main.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 从URL获取文章ID
            const urlParams = new URLSearchParams(window.location.search);
            const articleId = urlParams.get('id') || '1';
            
            // 根据ID获取文章数据
            // 实际项目中应从服务器获取数据
            const articlesData = {
                '1': {
                    title: '如何在简历中突出项目经历',
                    author: '简历优化师Tom',
                    authorAvatar: 'https://images.pexels.com/photos/819530/pexels-photo-819530.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
                    category: '简历优化',
                    coverImage: 'https://images.pexels.com/photos/4342496/pexels-photo-4342496.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1'
                },
                '2': {
                    title: '大厂面试常见问题及应对策略',
                    author: '资深面试官李明',
                    authorAvatar: 'https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
                    category: '面试技巧',
                    coverImage: 'https://images.pexels.com/photos/5668858/pexels-photo-5668858.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1'
                },
                '3': {
                    title: '职场礼仪须知',
                    author: '职场礼仪专家王丽',
                    authorAvatar: 'https://images.pexels.com/photos/774909/pexels-photo-774909.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
                    category: '求职礼仪',
                    coverImage: 'https://images.pexels.com/photos/3184465/pexels-photo-3184465.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1'
                },
                '4': {
                    title: '薪资谈判技巧',
                    author: 'HR总监赵旭',
                    authorAvatar: 'https://images.pexels.com/photos/2379004/pexels-photo-2379004.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
                    category: '薪资谈判',
                    coverImage: 'https://images.pexels.com/photos/3943716/pexels-photo-3943716.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1'
                },
                '5': {
                    title: '应届生简历写作攻略',
                    author: '校招负责人张洁',
                    authorAvatar: 'https://images.pexels.com/photos/7256694/pexels-photo-7256694.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
                    category: '简历优化',
                    coverImage: 'https://images.pexels.com/photos/7256694/pexels-photo-7256694.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1'
                },
                '6': {
                    title: '技术面试如何展示你的技术深度',
                    author: '技术总监陈志',
                    authorAvatar: 'https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
                    category: '面试技巧',
                    coverImage: 'https://images.pexels.com/photos/5668858/pexels-photo-5668858.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1'
                }
            };
            
            // 更新文章数据
            const articleData = articlesData[articleId];
            if (articleData) {
                document.getElementById('content-title').textContent = articleData.title;
                document.title = articleData.title + ' - 求职干货';
                document.getElementById('article-title').textContent = '干货详情';
                document.getElementById('author-name').textContent = articleData.author;
                document.getElementById('author-avatar').src = articleData.authorAvatar;
                document.getElementById('article-category').textContent = articleData.category;
                document.getElementById('cover-image').src = articleData.coverImage;
            }
            
            // 阅读进度条
            const progressBar = document.querySelector('.progress-bar');
            const articleBody = document.querySelector('.article-body');
            const contentHeight = articleBody.offsetHeight;
            
            window.addEventListener('scroll', function() {
                const scrollTop = window.scrollY;
                const viewportHeight = window.innerHeight;
                const headerHeight = document.querySelector('.article-header').offsetHeight;
                
                // 计算阅读进度
                const totalHeight = contentHeight - viewportHeight + headerHeight;
                const progress = (scrollTop / totalHeight) * 100;
                progressBar.style.width = Math.min(100, Math.max(0, progress)) + '%';
                
                // 显示/隐藏返回顶部按钮
                const backToTopBtn = document.getElementById('backToTop');
                if (scrollTop > viewportHeight * 0.5) {
                    backToTopBtn.classList.add('show');
                } else {
                    backToTopBtn.classList.remove('show');
                }
            });
            
            // 返回顶部按钮点击事件
            document.getElementById('backToTop').addEventListener('click', function() {
                window.scrollTo({
                    top: 0,
                    behavior: 'smooth'
                });
            });
            
            // 点赞按钮点击事件
            const likeBtn = document.querySelector('.like-btn');
            likeBtn.addEventListener('click', function() {
                if (!this.classList.contains('active')) {
                    this.classList.add('active');
                    
                    // 点赞数+1
                    const countSpan = this.querySelector('span');
                    let count = parseInt(countSpan.textContent);
                    countSpan.textContent = count + 1;
                    
                    // 创建飞心效果
                    createFlyingHeart();
                    
                    // 显示提示
                    showToast('点赞成功');
                } else {
                    this.classList.remove('active');
                    
                    // 点赞数-1
                    const countSpan = this.querySelector('span');
                    let count = parseInt(countSpan.textContent);
                    countSpan.textContent = count - 1;
                    
                    showToast('已取消点赞');
                }
            });
            
            // 收藏按钮点击事件
            const collectBtn = document.querySelector('.collect-btn');
            collectBtn.addEventListener('click', function() {
                if (!this.classList.contains('active')) {
                    this.classList.add('active');
                    this.querySelector('i').classList.remove('bi-bookmark');
                    this.querySelector('i').classList.add('bi-bookmark-fill');
                    this.querySelector('span').textContent = '已收藏';
                    
                    showToast('收藏成功');
                } else {
                    this.classList.remove('active');
                    this.querySelector('i').classList.remove('bi-bookmark-fill');
                    this.querySelector('i').classList.add('bi-bookmark');
                    this.querySelector('span').textContent = '收藏';
                    
                    showToast('已取消收藏');
                }
            });
            
            // 关注按钮点击事件
            const followBtn = document.querySelector('.follow-btn');
            followBtn.addEventListener('click', function() {
                if (!this.classList.contains('following')) {
                    this.classList.add('following');
                    this.textContent = '已关注';
                    
                    showToast('关注成功');
                } else {
                    this.classList.remove('following');
                    this.textContent = '关注';
                    
                    showToast('已取消关注');
                }
            });
            
            // 评论提交
            const commentForm = document.querySelector('.comment-form');
            const commentInput = document.querySelector('.comment-input');
            const commentSubmit = document.querySelector('.comment-submit');
            
            commentSubmit.addEventListener('click', function() {
                const content = commentInput.value.trim();
                if (content) {
                    // 模拟添加新评论
                    const commentList = document.querySelector('.comment-list');
                    const newComment = document.createElement('div');
                    newComment.className = 'comment-item';
                    newComment.innerHTML = `
                        <div class="comment-user">
                            <img src="https://images.pexels.com/photos/1036623/pexels-photo-1036623.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="用户头像" class="comment-avatar">
                            <div class="comment-user-info">
                                <div class="comment-username">我</div>
                                <div class="comment-time">刚刚</div>
                            </div>
                        </div>
                        <div class="comment-content">
                            <p>${content}</p>
                        </div>
                        <div class="comment-actions">
                            <div class="comment-like"><i class="bi bi-heart"></i> 0</div>
                            <div class="comment-reply">回复</div>
                        </div>
                    `;
                    
                    // 插入到评论列表顶部
                    commentList.insertBefore(newComment, commentList.firstChild);
                    
                    // 清空输入框
                    commentInput.value = '';
                    
                    // 更新评论数
                    const commentCount = document.querySelector('.comment-count');
                    const count = parseInt(commentCount.textContent.replace(/[()]/g, '')) + 1;
                    commentCount.textContent = `(${count})`;
                    
                    showToast('评论发布成功');
                } else {
                    showToast('评论内容不能为空');
                }
            });
            
            // 评论点赞
            document.querySelectorAll('.comment-like').forEach(btn => {
                btn.addEventListener('click', function() {
                    const likeCount = this.textContent.trim().split(' ')[1];
                    const icon = this.querySelector('i');
                    
                    if (icon.classList.contains('bi-heart')) {
                        icon.classList.remove('bi-heart');
                        icon.classList.add('bi-heart-fill');
                        icon.style.color = '#ff5c5c';
                        this.innerHTML = `<i class="bi bi-heart-fill" style="color: #ff5c5c;"></i> ${parseInt(likeCount) + 1}`;
                    } else {
                        icon.classList.remove('bi-heart-fill');
                        icon.classList.add('bi-heart');
                        icon.style.color = '';
                        this.innerHTML = `<i class="bi bi-heart"></i> ${parseInt(likeCount) - 1}`;
                    }
                });
            });
            
            // 创建飞心效果
            function createFlyingHeart() {
                const heart = document.createElement('div');
                heart.className = 'flying-heart';
                heart.innerHTML = '<i class="bi bi-heart-fill"></i>';
                document.body.appendChild(heart);
                
                // 随机位置
                heart.style.left = (10 + Math.random() * 30) + '%';
                
                // 移除元素
                setTimeout(() => {
                    heart.remove();
                }, 1000);
            }
            
            // 给所有图片添加点击放大效果
            document.querySelectorAll('.article-body img').forEach(img => {
                img.style.cursor = 'zoom-in';
                img.addEventListener('click', function() {
                    const overlay = document.createElement('div');
                    overlay.style.position = 'fixed';
                    overlay.style.top = '0';
                    overlay.style.left = '0';
                    overlay.style.width = '100%';
                    overlay.style.height = '100%';
                    overlay.style.backgroundColor = 'rgba(0,0,0,0.8)';
                    overlay.style.zIndex = '1000';
                    overlay.style.display = 'flex';
                    overlay.style.alignItems = 'center';
                    overlay.style.justifyContent = 'center';
                    overlay.style.cursor = 'zoom-out';
                    
                    const imgClone = document.createElement('img');
                    imgClone.src = this.src;
                    imgClone.style.maxWidth = '90%';
                    imgClone.style.maxHeight = '90%';
                    imgClone.style.objectFit = 'contain';
                    imgClone.style.transition = 'all 0.3s ease';
                    
                    overlay.appendChild(imgClone);
                    document.body.appendChild(overlay);
                    
                    imgClone.style.transform = 'scale(0.8)';
                    setTimeout(() => {
                        imgClone.style.transform = 'scale(1)';
                    }, 10);
                    
                    overlay.addEventListener('click', function() {
                        imgClone.style.transform = 'scale(0.8)';
                        imgClone.style.opacity = '0';
                        setTimeout(() => {
                            overlay.remove();
                        }, 300);
                    });
                });
            });
            
            // 显示通知
            function showToast(message) {
                // 如果已有Toast，则先移除
                const existingToast = document.querySelector('.toast-message');
                if (existingToast) {
                    existingToast.remove();
                }
                
                // 创建Toast元素
                const toast = document.createElement('div');
                toast.className = 'toast-message';
                toast.textContent = message;
                document.body.appendChild(toast);
                
                // 显示Toast
                setTimeout(() => {
                    toast.classList.add('show');
                }, 10);
                
                // 自动消失
                setTimeout(() => {
                    toast.classList.remove('show');
                    setTimeout(() => {
                        toast.remove();
                    }, 300);
                }, 2500);
            }
        });
    </script>
    
    <style>
        /* 文章详情页特有样式 */
        .article-header {
            padding: 15px 20px;
            padding-bottom: 0;
        }
        
        .main-title {
            font-size: 22px;
            font-weight: bold;
            color: #333;
            margin-bottom: 15px;
            line-height: 1.4;
        }
        
        .article-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }
        
        .author-info {
            display: flex;
            align-items: center;
        }
        
        .author-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            margin-right: 10px;
            object-fit: cover;
            border: 1px solid #f0f0f0;
        }
        
        .author-details {
            display: flex;
            flex-direction: column;
        }
        
        .author-name {
            font-size: 14px;
            font-weight: 500;
            color: #333;
        }
        
        .publish-time {
            font-size: 12px;
            color: #999;
            margin-top: 2px;
        }
        
        .follow-btn {
            background-color: #f0f5ff;
            color: #4e6ef2;
            border: none;
            border-radius: 15px;
            padding: 5px 12px;
            font-size: 13px;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .follow-btn:hover, .follow-btn.following {
            background-color: #4e6ef2;
            color: white;
        }
        
        .article-category {
            display: inline-block;
            background-color: #f5f7fa;
            color: #666;
            font-size: 12px;
            padding: 3px 10px;
            border-radius: 12px;
            margin-bottom: 15px;
        }
        
        .article-body {
            padding: 0 20px 20px;
        }
        
        .cover-image {
            width: 100%;
            border-radius: 12px;
            margin: 15px 0 20px;
            object-fit: cover;
            max-height: 300px;
        }
        
        .article-body h2 {
            font-size: 18px;
            font-weight: 600;
            color: #333;
            margin: 30px 0 15px;
            position: relative;
        }
        
        .article-body h2::before {
            content: '';
            position: absolute;
            left: -20px;
            top: 4px;
            width: 4px;
            height: 18px;
            background-color: #4e6ef2;
            border-radius: 2px;
        }
        
        .article-body h3 {
            font-size: 16px;
            font-weight: 600;
            color: #333;
            margin: 20px 0 12px;
        }
        
        .article-body p {
            font-size: 15px;
            line-height: 1.8;
            color: #333;
            margin-bottom: 15px;
        }
        
        .article-body ul, .article-body ol {
            padding-left: 20px;
            margin-bottom: 20px;
        }
        
        .article-body li {
            font-size: 15px;
            line-height: 1.7;
            color: #333;
            margin-bottom: 10px;
        }
        
        .article-body strong {
            font-weight: 600;
            color: #333;
        }
        
        .highlight-box {
            background-color: #f7f9ff;
            border-radius: 12px;
            padding: 18px 20px;
            margin: 20px 0;
            border-left: 4px solid #4e6ef2;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        }
        
        .example-box {
            background-color: #f9f9f9;
            border-radius: 12px;
            padding: 18px 20px;
            margin: 20px 0;
            border: 1px solid #e0e0e0;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
        }
        
        .article-footer {
            padding: 15px 20px;
            border-top: 1px solid #f0f0f0;
            margin-top: 30px;
        }
        
        .action-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .action-btn {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 8px 0;
            flex: 1;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .action-btn i {
            font-size: 20px;
            color: #666;
            margin-bottom: 5px;
            transition: all 0.3s;
        }
        
        .action-btn span {
            font-size: 12px;
            color: #666;
        }
        
        .action-btn:hover i, .action-btn.active i {
            color: #ff5c5c;
        }
        
        .action-btn.like-btn.active i, .action-btn.collect-btn.active i {
            color: #ff5c5c;
            transform: scale(1.2);
        }
        
        .related-section, .comment-section {
            padding: 20px;
            background-color: #f9f9f9;
            margin-top: 1px;
        }
        
        .section-title {
            font-size: 17px;
            font-weight: 600;
            color: #333;
            margin-bottom: 15px;
            position: relative;
            display: flex;
            align-items: center;
        }
        
        .section-title::before {
            content: '';
            display: inline-block;
            width: 4px;
            height: 16px;
            background-color: #4e6ef2;
            margin-right: 8px;
            border-radius: 2px;
        }
        
        .comment-count {
            font-size: 14px;
            color: #999;
            font-weight: normal;
            margin-left: 5px;
        }
        
        .related-list {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }
        
        .related-item {
            display: flex;
            background-color: white;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        
        .related-item:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
        }
        
        .related-item-img {
            width: 100px;
            height: 70px;
            flex-shrink: 0;
        }
        
        .related-item-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .related-item-info {
            flex: 1;
            padding: 8px 12px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        
        .related-item-info h3 {
            font-size: 14px;
            font-weight: 500;
            color: #333;
            margin: 0;
            line-height: 1.3;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        .related-item-meta {
            display: flex;
            justify-content: space-between;
            font-size: 12px;
            color: #999;
            margin-top: 5px;
        }
        
        .comment-list {
            display: flex;
            flex-direction: column;
            gap: 15px;
            margin-bottom: 20px;
        }
        
        .comment-item {
            background-color: white;
            border-radius: 12px;
            padding: 15px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        }
        
        .comment-user {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }
        
        .comment-avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            margin-right: 10px;
            object-fit: cover;
        }
        
        .comment-user-info {
            flex: 1;
        }
        
        .comment-username {
            font-size: 14px;
            font-weight: 500;
            color: #333;
        }
        
        .comment-time {
            font-size: 12px;
            color: #999;
        }
        
        .comment-content {
            font-size: 14px;
            line-height: 1.5;
            color: #333;
            margin-bottom: 10px;
        }
        
        .comment-actions {
            display: flex;
            gap: 15px;
        }
        
        .comment-like, .comment-reply {
            font-size: 12px;
            color: #999;
            cursor: pointer;
        }
        
        .comment-like:hover, .comment-reply:hover {
            color: #4e6ef2;
        }
        
        .comment-form {
            display: flex;
            flex-direction: column;
            gap: 10px;
            margin-top: 20px;
        }
        
        .comment-input {
            width: 100%;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            padding: 12px;
            font-size: 14px;
            resize: none;
            height: 80px;
        }
        
        .comment-input:focus {
            border-color: #4e6ef2;
            outline: none;
        }
        
        .comment-submit {
            align-self: flex-end;
            background-color: #4e6ef2;
            color: white;
            border: none;
            border-radius: 20px;
            padding: 8px 20px;
            font-size: 14px;
            cursor: pointer;
        }
        
        .flying-heart {
            position: fixed;
            bottom: 30%;
            left: 20%;
            color: #ff5c5c;
            font-size: 24px;
            animation: fly-up 1s ease-out forwards;
            opacity: 0;
            z-index: 1000;
        }
        
        @keyframes fly-up {
            0% {
                transform: scale(0.5) translateY(0);
                opacity: 0;
            }
            25% {
                opacity: 1;
            }
            100% {
                transform: scale(1.5) translateY(-100px);
                opacity: 0;
            }
        }
        
        /* 进度条 */
        .progress-bar {
            position: fixed;
            top: 0;
            left: 0;
            height: 3px;
            background-color: #4e6ef2;
            width: 0;
            z-index: 1000;
            transition: width 0.1s ease;
        }
        
        /* 浮动操作按钮 */
        .float-action {
            position: fixed;
            right: 15px;
            bottom: 80px;
            width: 42px;
            height: 42px;
            border-radius: 50%;
            background-color: rgba(78, 110, 242, 0.9);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            z-index: 900;
            opacity: 0;
            transform: translateY(20px);
            transition: all 0.3s ease;
            cursor: pointer;
        }
        
        .float-action.show {
            opacity: 1;
            transform: translateY(0);
        }
        
        .toast-message {
            position: fixed;
            bottom: 100px;
            left: 50%;
            transform: translateX(-50%) translateY(20px);
            background-color: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 10px 20px;
            border-radius: 20px;
            font-size: 14px;
            opacity: 0;
            transition: all 0.3s ease;
            z-index: 1000;
        }
        
        .toast-message.show {
            opacity: 1;
            transform: translateX(-50%) translateY(0);
        }
    </style>
</body>
</html> 